<template>
  <div class="register">
    <n-card style="width: 500px" title="会员注册页">
      <n-form size="small" :model="form" :rules="rules" ref="formRef">
        <n-grid>
          <n-form-item-grid-item :span="24" label="用户名" path="username">
            <n-input
              v-model:value="form.username"
              placeholder="请输入用户名"
            ></n-input>
          </n-form-item-grid-item>
          <n-form-item-grid-item :span="24" label="密码" path="password">
            <n-input
              v-model:value="form.password"
              placeholder="请输入密码"
            ></n-input>
          </n-form-item-grid-item>
          <n-form-item-grid-item :span="24" label="确认密码" path="repassword">
            <n-input
              v-model:value="form.repassword"
              placeholder="请确认输入的会员密码"
            ></n-input>
          </n-form-item-grid-item>
          <n-form-item-grid-item :span="24" label="联系电话" path="tel">
            <n-input
              v-model:value="form.tel"
              placeholder="请输入联系电话"
            ></n-input>
          </n-form-item-grid-item>
          <n-form-item-grid-item :span="24" label="收货地址" path="address">
            <n-input
              v-model:value="form.address"
              placeholder="请输入收货地址"
            ></n-input>
          </n-form-item-grid-item>
          <n-grid-item :span="4">
            <n-button @click="submitForm" type="primary">注册</n-button>
          </n-grid-item>
          <n-grid-item :offset="15" :span="5">
            <n-button @click="$router.push('/login')" type="info" dashed
              >返回登录</n-button
            >
          </n-grid-item>
        </n-grid>
      </n-form>
    </n-card>
  </div>
</template>

<script lang="ts">
import {
  useMessage,
  NCard,
  NForm,
  NFormItemGridItem,
  NInput,
  NButton,
  NGrid,
  NGridItem,
} from "naive-ui";
import { defineComponent, ref } from "vue";
import { http } from "../http";

interface Register {
  username: string;
  password: string;
  repassword: string;
  tel: string;
  address: string;
}

export default defineComponent({
  name: "App",
  components: {
    NCard,
    NForm,
    NFormItemGridItem,
    NInput,
    NButton,
    NGrid,
    NGridItem,
  },
  setup() {
    const formRef = ref<typeof NForm | null>(null);
    const message = useMessage();
    const form = ref<Register>({
      username: "",
      password: "",
      repassword: "",
      tel: "",
      address: "",
    });

    const submitForm = () => {
      formRef?.value?.validate(async (e: any) => {
        if (!e) {
          try {
            const { repassword, ...params } = form.value;
            await http.post("/auth/register", {
              ...params,
              grant: 0,
            });
            message.success("success");
          } catch (e) {
            message.error("注册失败,请检查输入的字段");
          }
        } else {
          message.error("请检查输入的字段");
        }
      });
    };

    const rules = ref({
      username: {
        required: true,
        message: "请输入用户名",
        trigger: "blur",
      },
      password: {
        required: true,
        message: "请输入会员密码",
        trigger: "blur",
      },
      repassword: {
        required: true,
        validator(rules: any, value: string) {
          if (!value) {
            return new Error("请确认输入的密码");
          } else if (value != form.value.password) {
            return new Error("输入的会员密码不一致");
          }
          return true;
        },
        trigger: "blur",
      },
      tel: {
        required: true,
        validator(rules: any, value: string) {
          if (!value) {
            return new Error("请输入联系电话");
          } else if (!/^\d{11}$/.test(value)) {
            return new Error("手机号码格式不正确");
          }
          return true;
        },
        trigger: ["blur", "input"],
      },
      address: {
        required: true,
        message: "请输入收货地址",
        trigger: "blur",
      },
    });
    return {
      formRef,
      form,
      submitForm,
      rules,
    };
  },
});
</script>

<style scoped>
.register {
  height: 100%;
  background: linear-gradient(
    172deg,
    #e8f0f2 0%,
    #a2dbfa 48%,
    #a2dbfa 55%,
    #e8f0f2 90%
  );
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
